<template>
  <div>
    <!-- 修改密码 -->
    <el-card class="box-card">
      <!-- 头部 -->
      <div slot="header">
        <span>修改密码</span>
      </div>
      <!-- 内容 -->
      <el-form
        :model="changePassword"
        size="small"
        :rules="rules"
        ref="changePassword"
        label-width="100px"
        status-icon
      >
        <!-- 原密码 -->
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            type="password"
            v-model="changePassword.oldPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <!-- 新密码 -->
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            type="password"
            v-model="changePassword.newPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <!-- 确定新密码 -->
        <el-form-item label="确认新密码" prop="reCheckPwd">
          <el-input
            type="password"
            v-model="changePassword.reCheckPwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <!-- 确定跟重置 -->
        <el-form-item>
          <el-button type="primary" @click="ensure">确定</el-button>

          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { oldPassword, newCheckPwd, reCheckPwd } from "@/utils/verification.js";
import { validateOldPwd,updatePwd } from "../../api/user";
// import local from '@/utils/local';
export default {
  //数据
  data() {
    //验证旧密码
    const oldPassword = async (rule, value, callback) => {
      //⭐取出原账号密码
      // local.get('accountPassword')
      if (!value) {
        callback(new Error("请输入旧密码"));
      } else {
        //还需要判断旧密码与之前的是否一致  必须发送ajax才能做验证，前端不能验证
         let res = await validateOldPwd({
            oldPwd:this.changePassword.oldPassword
          })
         console.log(res);
        if (res.data.code===200) {
          console.log(777);
        callback();
        }
      }
    };

    //新密码
    const newCheckPwd = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入新密码"));
      } else if (!/^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{6,12}$/.test(value)) {
        callback(new Error("字母开头,6到12位"));
      } else if (value == this.changePassword.oldPassword) {
        callback(new Error("密码不能跟原密码一致"));
      } else {
        if (this.changePassword.newCheckPwd) {
          //对表单的某个字段（确认新密码）进行校验
          this.$refs.changePassword.validateField("newPassword");
        }
        callback();
      }
    };

    // //验证密码跟再次输入的密码是否一致
    const reCheckPwd = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.changePassword.newPassword) {
        callback(new Error("两次密码不一致"));
      } else if (value === this.changePassword.newPassword) {
        callback();
      }
    };

    return {
      //更改密码表单
      changePassword: {
        oldPassword: "",
        newPassword: "",
        reCheckPwd: "",
      },
      code:'',
      ////验证规则
      rules: {
        // 原密码
        oldPassword: [
          { required: true, validator: oldPassword, trigger: "blur" },
        ],
        //新密码
        newPassword: [
          { required: true, validator: newCheckPwd, trigger: "blur" },
        ],
        //再次验证
        reCheckPwd: [
          { required: true, validator: reCheckPwd, trigger: "blur" },
        ],
      },
    };
  },
  //方法
  methods: {
    //确定
    ensure() {
      this.$refs.changePassword.validate(async(valid) => {
        if (valid) {
          // alert("修改成功");  alert 会阻拦后面的进程
        let res =   await updatePwd({newPwd:this.changePassword.newPassword})
      
        // newPwd = this.changePassword.newPassword
          this.$router.push('/login')
        } else {
          console.log("修改失败");
          return false;
        }
      });
    },
    //重置
    resetForm() {
      this.$refs.changePassword.resetFields((valid) => {
        if (valid) {
          alert("重置成功");
          
        } else {
          console.log("重置失败");
          return false;
        }
      });
    },
    //获取原密码
    //获取旧密码
    // async oldPasswords(){
    //   let res = await validateOldPwd({
    //     oldPwd:this.changePassword.oldPassword
    //   })
    //   this.code=res.data.code
    //   console.log(res.data.code,this.code);
    // }
  },
};
</script>

<style lang="less" scoped>
.el-form {
  width: 300px;
}
</style>